<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-page-header @back="goBack" content="参与的区角" class="mb-10"></el-page-header>
      <div class="mb-10">
        <div class="toplineBox">
          <div class="toplineBox-left">
            <!--<el-input v-model="searchWord.corner_name" placeholder="填写区角名称" size="small" class="w-140"></el-input>-->
            <el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    size="small"
                    :picker-options="pickerOptions1">
            </el-date-picker>
            <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
            <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置刷新</el-button>
          </div>
          <p class="numberline toplineBox-right">总{{page.total}}条</p>
        </div>
      </div>
      <div class="mb-20" v-if="navList.length">
        <el-radio-group v-model="arearBox" size="small" class="mb-10" @change="changeArear">
          <el-radio-button :label="item.corner_id" v-for="(item,index) in navList" :key="index">{{item.corner.name}}</el-radio-button>
        </el-radio-group>
        <p>本区角达标时长为 <span class="c-danger">{{passTime}}</span> 分钟，该生参与时长 <span class="c-danger">{{joinTime}}</span> 分钟</p>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
                  ref="multipleTable"
                  :data="arryList"
                  :stripe="tableoption.tableStripe"
                  :border="tableoption.tableBorder"
                  tooltip-effect="dark"
                  style="width: 100%"
                  header-cell-class-name="table-text-c"
                  cell-class-name="table-text-c">
            <el-table-column
                    label="现场图"
                    width="100">
              <template slot-scope="scope">
                <div class="checkImgDialog width60 mg-auto"
                     :style="{backgroundImage:'url('+scope.row.corner.pic+')',backgroundSize:'cover',backgroundPosition:'center'}"
                     @click="viewImgDialogFn(scope.$index)">
                  <div class="imgpreviewBody">
                    <div class="imgpreview">
                      <i class="el-icon-view"></i>
                    </div>
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
                    label="区角名称">
              <template slot-scope="scope">
                {{scope.row.corner.name}}
              </template>
            </el-table-column>
            <el-table-column
                    prop="use_time"
                    label="参与时间">
            </el-table-column>
            <el-table-column
                    label="架构人" width="80">
              <template slot-scope="scope">
                {{scope.row.user.realname}}
              </template>
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="200">
              <template slot-scope="scope">
                <el-button size="small" @click="addActive(scope.$index)">查看实时采集</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
                background
                :page-size="page.pagesize"
                :current-page="page.pageindex"
                layout="total, prev, pager, next"
                :total="page.total"
                @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
  </div>
</template>

<script>
  import {pagination, tableoption, yeartime} from '@/utils/util.js'
  import api from '@/utils/api.js'

  export default {
    data () {
      return {
        arearBox: '',
        tableoption: tableoption,
        editId: this.$route.query,
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        arryList: [],
        imgsrcCheck: '',
        pickerOptions1: {
          disabledDate (time) {
            return time.getTime() > Date.now() - 8.64e7
          }
        },
        searchWord: {
          start_time: ''
        },
        value1: '',
        navList: [],
        passTime: 0, // 合格时间
        joinTime: 0 // 参与时间
      }
    },
    created () {
      this.InitFn('init')
    },
    methods: {
      // 初始化
      InitFn (option) {
        console.log('页面请求的数据内容：', this.editId)
        let url_ = api.admin_corner_apply_student
        let data = {p: this.page.pageindex, student_id: this.editId.student_id, class_id: this.editId.class_id}
        if (Number(this.editId.type) === 2) {
          url_ = api.admin_corner_apply_student
          // data.corner_id = ''// 区角id
          // 班级id
          data.fraction = this.editId.fraction// 分数
        }
        data.star_time = ''
        data.end_time = ''
        data.corner_id = this.arearBox
        if (this.value1.length) {
          data.star_time = this.value1[0]
          data.end_time = this.value1[1]
        }

        this.$post(api.admin_corner_apply_student, data).then((response) => {
          if (response.code === 0) {
            this.arryList = response.list.data
            this.page.total = response.list.total
            if (option === 'init') {
              this.navList = response.nav || []
            }

            if (response.list.data.length) {
              this.joinTime = response.list.data[0].time // 参与时间
            }

            if (!this.arearBox && response.nav) {
              this.arearBox = response.nav[0].corner_id
              this.passTime = response.nav[0].corner.time // 合格时间
              this.InitFn()
            }
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      changeArear () {
        for (let i in this.navList) {
          if (this.arearBox === this.navList[i].id) {
            this.passTime = this.navList[i].corner.time // 合格时间
          }
        }
        this.page.pageindex = 1
        this.InitFn()
      },
      // 搜索
      searchBtn () {
        this.page.pageindex = 1
        this.InitFn()
      },
      // 刷新页面
      refreshFn () {
        this.page.pageindex = 1
        this.value1 = []
        this.InitFn()
      },
      handleEdit (index) {
        this.$router.push('/CornerApplyHestoryDetail?id=' + this.arryList[index].id)
      },
      goBack () {
        this.$router.go(-1)
      },
      // 分页
      handleSizeChange (val) {
        this.page.pageindex = val
        this.InitFn()
      },
      showClassList (indexList, index) {
        this.$router.push('/CornerApplyHestoryDetail?corner_id=' + this.arryList[indexList].corner_id + '&class_id=' + this.arryList[indexList].apply_class[index].id)
      },
      viewImgDialogFn (index) {
        this.imgsrcCheck = this.arryList[index].pic
        this.dialogImgVisible = true
      },
      addActive (index) {
        this.$router.push('/statudentAtive?id=' + this.arryList[index].id)
      }
    },
    mounted () {
    }
  }
</script>

